<template>
	<!-- 我的 -->
	<view>
		<view class="header">
			<view class="userinfo">
				<view class="face">
					<u-avatar :src="src"></u-avatar>
				</view>
				<view class="info">
					<view class="username">
						<!-- {{userinfo.username}} -->
						未登录/注册
					</view>
					<view class="vip">
						<!-- {{userinfo.vip}} -->
						<image src="/static/my_icon/VIP.png" mode=""></image>
						<text>会员等级</text>
					</view>
				</view>
				<view class="setting">
					<image src="/static/my_icon/设置.png" mode=""></image>
				</view>
			</view>
			
			
			
			<view class="fund">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout">
								<view class="val">
									10.00
								</view>
								<text>余额</text>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout">
								<view class="val">
									10.00
								</view>
								<text>普通积分</text>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout">
								<view class="val">
									10.00
								</view>
								<text>推广积分</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		
		
		<view class="order">
			<view class="box">
				<view class="lable" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
					<view class="icon">
						<image :src="row.icon" mode=""></image>
						
					</view>
					{{row.name}}
					
				</view>
				
			</view>
			
		</view>
		
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list"
			 hover-class="hover" :key="li.name"
			@tap="toPage(list_i,li_i)">
				<view class="icon">
					<image :src="li.icon"></image>
				</view>
				<view class="text">{{li.name}}</view>
				<image class="to" src="/static/my_icon/单箭头,单角符,右.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				orderTypeLise:[
					{
						name:'全部订单',
						icon:'/static/my_icon/全部订单.png'
					},{
						name:'待付款',
						icon:'/static/my_icon/待付款.png'
					},{
						name:'待评价',
						icon:'/static/my_icon/评价.png'
					},{
						name:'退款/售后',
						icon:'/static/my_icon/退款_售后.png'
					},
				],
				severList: [
					[{
						name: '红包卡券',
						icon: '/static/my_icon/红包.png',
						URL:'/'
					},
					{
						name: 'vip会员',
						icon: '/static/my_icon/VIP (1).png',
						URL:'/'
					}
				],
				[
					{
						name: '信息咨询',
						icon: '/static/my_icon/服务.png',
						URL:'/'
					},
					{
						name: '商家入驻',
						icon: '/static/my_icon/服务.png',
						URL:'/'
					},
					{
						name: '联系信息填写',
						icon: '/static/my_icon/服务.png',
						URL:'/pages/order/contactInfo'
					}
				]
			],
			}
		},
		// onLoad() {
		// 	this.init();
		// }
		methods:{
			toOrderType(index){
				uni.navigateTo({
					url:'../order/index'
				})
			},
			toPage(list_i,li_i){
				uni.navigateTo({
					url:this.severList[list_i][li_i].URL
				})
				// console.log(1)
			},
			rightClick(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	
	.header{
		background-color: rgb(84,188,189);
		width: 100%;
		height: 40vw;
		padding: 0 4%;
		display: flex;
		flex-flow: column;
		/* align-items: center; */
	}
	
	.userinfo{
		width: 90%;
		height: 170rpx;
		display: flex;
		padding-top: 40rpx;
	}
	
	.info{
		display: flex;
		height: 40rpx;
		flex-flow: wrap;
		align-content: space-between;
		padding-left: 30rpx;
	}
	
	.username{
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.vip{
		width: 156rpx;
		height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		/* padding: 0 20rpx; */
		background-color: #4ba7a8;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	
	.vip image{
		width: 30rpx;
		height: 30rpx;	
	}
	
	.vip text{
		color: #dbdbdb;
		
	}
	
	.setting{
		flex-shrink: 0;
		width: 60rpx;
		height: 60rpx;
		margin-top: 30rpx;
		margin-left: 200rpx;
	}
	.setting image{
		width: 100%;
		height: 100%;
	}
	
	
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 40px;
		border-radius: 4px;
		display: flex;
		flex-flow: column;
		align-items: center;
		color: #fff;
		font-size: 22rpx;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.order{
		/* background-color: #fff; */
		width: 96%;
		height: 100rpx;
		margin-left: 2%;
		margin-top: -60rpx;
		display: flex;
		justify-content: center;
		margin-bottom: 100rpx;
		/* border-radius: 0 0 100% 100%; */
	}
	.order .box{
		width: 98%;
		padding: 0 1%;
		height: 22vw;
		background-color: #fefefe;
		border-radius: 24rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.order .box .lable{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: wrap;
	}
	.order .box .lable .icon{
		position: relative;
		width: 80rpx;
		height: 80rpx;
	}
	.order .box .lable image{
		width: 80rpx;
		height: 80rpx;
		
	}
	
	.list{
		width: 100%;
		border-bottom: solid 26rpx #f1f1f1;
	}
	
	.li {
		width: 92%;
		height: 100rpx;
		padding: 0 4%;
		border-bottom: solid 1rpx #e7e7e7;
		display: flex;
		align-items: center;
		}
		
	.icon {
		flex-shrink: 0;
		width: 50rpx;
		height: 50rpx;
		}
	.icon image {
		width: 50rpx;
		height: 50rpx
		}

	.text {
		padding-left: 20rpx;
		width: 100%;
		color: #666
	}

	.to {
		flex-shrink: 0;
		width: 40rpx;
		height: 40rpx
	}
	
	
</style>